import { useEffect, useState, useRef } from "react";
import FormTwo from "@/comment/FormTwo";
import { setFormList_fn, setFormList_nest_item_fn } from "@/comment/FormTwo/utils";

import { Button, message, Tooltip } from "antd";
import "./index.scss";
import { useRoute } from "@/hooks";
import { login } from "@/api/home";
import { setToken, path_home } from "@/utils/auth";
import "./index.scss";
import { connect } from "@/utils/webSocket";
import UserAgreement from "@/comment/UserAgreement";
import PrivacyAgreement from "@/comment/PrivacyAgreement";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { setWsHost, getWsHost } from "@/utils/localStorage";

window.sessionStorage.clear();

export default function index() {
	const { push } = useRoute();

	const FormTwo_ref1 = useRef(null);

	// layout或者style 配置项
	let [formTwoProps, setFormTwoProps] = useState({
		formItemLayout: {
			labelCol: {
				span: 10,
			},
		},
		layout: "vertical",
		style: { maxWidth: "500px" },
		isButton: false,
	} as any);

	//初始data
	let dataFormRoleInfo = {
		account: "",
		password: "",
	};
	let [formData, setFormData] = useState(dataFormRoleInfo);

	const onFinish = async (values: any) => {
		console.log("表单", values);
		let { data } = await login(values);
		setToken(data.access_token);
		//websocket链接 手动本地有就本地
		if (getWsHost()&&getWsHost().radio==2) {
			connect(getWsHost().ws_host);
		} else if (data.websocket_host) {
			setWsHost({ ws_host: data.websocket_host, radio: 1 });
			connect(data.websocket_host);
		} else {
			connect(" ");//空地址
			message.error("没有websocket地址");
		}
		message.success("登录成功");
		// push(path_home()); //路由第一项
		push("/");
	};

	function Tooltip_fn(bool: boolean) {
		return (
			<div>
				<Tooltip title="请先同意《用户协议》《隐私协议》" open={bool} placement="topLeft" className="w-100%">
					<div>
						我已阅读并同意
						<span className="c-#5864FF" onClick={() => setIsUserAgreement(true)}>
							《用户协议》、
						</span>
						<span className="c-#5864FF" onClick={() => setIsPrivacyAgreement(true)}>
							《隐私协议》
						</span>
					</div>
				</Tooltip>
			</div>
		);
	}
	let [formList, setFormList] = useState([
		{
			type: "input",
			label: "用户名",
			name: "account",
			placeholder: "请输入用户名",
			prefix: <UserOutlined />,
			rules: [{ required: true, message: "请输入用户名!" }],
		},
		{
			type: "inputPassword",
			label: "密码",
			name: "password",
			prefix: <LockOutlined />,
			placeholder: "请输入密码",
			rules: [{ required: true, message: "请输入密码!" }],
		},
		{
			type: "nest_item",
			label: "",
			name: "nest_item",
			validateStatus: "warning",
			wrapClassName: "mt-30px translate-y-28px",
			children: [
				{
					type: "checkbox",
					label: "",
					name: "checkbox",
					rules: [
						{
							validator: (_: any, value: boolean) => {
								return value ? Promise.resolve() : Promise.reject(new Error("请勾选使用协议"));
							},
						},
					],
					onChange: (e: any) => {
						setFormList_nest_item_fn(setFormList, "nest_item", "checkbox", { checkboxText: Tooltip_fn(!e.target.checked) });
					},
					checkboxText: Tooltip_fn(true),
				},
			],
		},
		{
			type: "button",
			children: (
				<Button type="primary" htmlType="submit" className=" bg-#5864FF text-white w-full">
					登录
				</Button>
			),
		},
	]);

	let [isUserAgreement, setIsUserAgreement] = useState(false);
	let [isPrivacyAgreement, setIsPrivacyAgreement] = useState(false);

	return (
		<div className="login_bg w-100vw h-100vh relative">
			<section className="w-620px bg-white rounded-lg p-36px max-w-sm absolute top-160px right-300px">
				<h1 className="text-32px font-bold line-height-45px c-#161940">欢迎登录</h1>
				<h1 className="text-24px  font-bold line-height-45px c-#161940">元梦MR-沉浸式互动体验馆</h1>
				<p className="mb-8 font-size-14px c-#9697A9">请使用分配给您的账号密码登录</p>
				<div>
					<FormTwo
						ref={FormTwo_ref1}
						formList={[formList, setFormList]}
						onFinish={onFinish}
						formTwoProps={formTwoProps}
						formData={[formData, setFormData, dataFormRoleInfo]}></FormTwo>
				</div>
				<div className="c-#9697A9 text-center text-14px ">
					<span className="c-#5C5F7A ">忘记密码</span>请联系您的合作伙伴
				</div>
			</section>
			{isUserAgreement && <UserAgreement isModalOpen={[isUserAgreement, setIsUserAgreement]}></UserAgreement>}
			{isPrivacyAgreement && <PrivacyAgreement isModalOpen={[isPrivacyAgreement, setIsPrivacyAgreement]}></PrivacyAgreement>}
		</div>
	);
}
